<template>
  <div class="dashboard-editor-container">

    <!--抽屉-->
    <el-drawer
      title="我是标题"
      :with-header="false"
      :before-close="receiveLove"
      :visible.sync="drawer"
      direction="rtl"
      size="400">

      <el-table
        :data="loveList"
        style="width: 100%">

        <el-table-column
          prop="blogId"
          label="博客Id"
          width="150">
        </el-table-column>

        <el-table-column
          prop="address"
          label="网友地址"
          width="150">
        </el-table-column>

        <el-table-column
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-check" circle
                       @click.native.prevent="deleteRow(scope.$index, loveList)"
                       size="mini"
            ></el-button>
          </template>
        </el-table-column>

      </el-table>

    </el-drawer>

    <!--    <github-corner class="github-corner" />-->

    <!--    <panel-group @handleSetLineChartData="handleSetLineChartData" />-->
    <panel-group :count="count" :have-boolean="haveBoolean" @love-click="openLoveDrawer"/>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="readCount" />
    </el-row>

    <!--    <el-row :gutter="32">-->
    <!--      <el-col :xs="24" :sm="24" :lg="8">-->
    <!--        <div class="chart-wrapper">-->
    <!--          <raddar-chart />-->
    <!--        </div>-->
    <!--      </el-col>-->
    <!--      <el-col :xs="24" :sm="24" :lg="8">-->
    <!--        <div class="chart-wrapper">-->
    <!--          <pie-chart />-->
    <!--        </div>-->
    <!--      </el-col>-->
    <!--      <el-col :xs="24" :sm="24" :lg="8">-->
    <!--        <div class="chart-wrapper">-->
    <!--          <bar-chart />-->
    <!--        </div>-->
    <!--      </el-col>-->
    <!--    </el-row>-->

    <!--    <el-row :gutter="8">-->
    <!--      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">-->
    <!--        <transaction-table />-->
    <!--      </el-col>-->
    <!--      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">-->
    <!--        <todo-list />-->
    <!--      </el-col>-->
    <!--      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">-->
    <!--        <box-card />-->
    <!--      </el-col>-->
    <!--    </el-row>-->
  </div>
</template>

<script>
  // import GithubCorner from '@/components/GithubCorner'
  import PanelGroup from './components/PanelGroup'
  import LineChart from './components/LineChart'
  import {transactionList} from "@/api/remote-search";
  // import RaddarChart from './components/RaddarChart'
  // import PieChart from './components/PieChart'
  // import BarChart from './components/BarChart'
  //订单状态表里面要获取首页数据
  // import TransactionTable from './components/TransactionTable'
  // import TodoList from './components/TodoList'
  // import BoxCard from './components/BoxCard'

  import { dashboard } from '@/api/dashboardApi'
  import { receiveLove } from "@/api/dashboardApi";

  // const lineChartData = {
  //   readCount: {
  //     xDay: [100, 120, 161, 134, 105, 160, 165],
  //     yCount: [120, 82, 91, 154, 162, 140, 145]
  //   }
    // ,
    // messages: {
    //   expectedData: [200, 192, 120, 144, 160, 130, 140],
    //   actualData: [180, 160, 151, 106, 145, 150, 130]
    // },
    // purchases: {
    //   expectedData: [80, 100, 121, 104, 105, 90, 100],
    //   actualData: [120, 90, 100, 138, 142, 130, 130]
    // },
    // shoppings: {
    //   expectedData: [130, 140, 141, 142, 145, 150, 160],
    //   actualData: [120, 82, 91, 154, 162, 140, 130]
    // }
  // }

  export default {
    name: 'DashboardAdmin',
    components: {
      // GithubCorner,//右上角 角标
      PanelGroup,//首页的四个选择框
      LineChart,//图表
      // RaddarChart,//第一个分析图
      // PieChart,//第二个分析图
      // BarChart,//第三个分析图
      // TransactionTable,//订单状态栏
      // TodoList,//代办事项
      // BoxCard//个人信息卡
    },
    data() {
      return {
        count:{
          userCount: 0,
          blogCount: 0,
          commentCount: 0,
          loveCount: 0
        },
        readCount: {
          xDay: [],
          yCount: []
        },
        haveBoolean:{
          user:false,
          comment:false,
          love: false
        },
        loveList:[],
        drawer: false,//从左往右开的抽屉
        receiveLoveArray:[],//接收的点赞,关闭抽屉时传给后端
      }
    },
    methods: {
      // handleSetLineChartData(type) {
      //   this.lineChartData = lineChartData[type]
      // }
      fetchData() {
        dashboard().then(response => {
          console.log(response)
          const data=response.data;
          //数量
          this.count.userCount=parseInt(data.UserCount);
          this.count.blogCount=parseInt(data.BlogCount);
          this.count.commentCount=parseInt(data.CommentCount);
          this.count.loveCount=parseInt(data.LoveCount);
          //近期阅读量
          this.readCount.xDay=data.recent7day;
          this.readCount.yCount=data.readCount;
          //点赞信息
          this.loveList=data.loveList;//记得要在haveBoolean.love前面,因为监听函数
          //新增提示
          this.haveBoolean.user=data.haveNewUser;
          this.haveBoolean.comment=data.haveNewComment;
          this.haveBoolean.love=data.loveList.length!==0;//不等于0就代表有新点赞
        })
      },
      openLoveDrawer(){
        this.drawer=true;//打开抽屉
      },
      deleteRow(index,rows){
        this.receiveLoveArray.push(this.loveList[index])
        rows.splice(index, 1);
      },
      receiveLove(done){
        done();
        //将receiveLoveArray里面的接收信息发给后端
        if(this.receiveLoveArray.length!==0){
          console.log("发送了接收点赞指令")
          receiveLove(this.receiveLoveArray).then(res=>{
            console.log(res.msg);
          })
          this.receiveLoveArray=[];
        }
      }
    },
    watch:{
      loveList:{
        //deep: true,//是否深度监听(监听对象内部属性需要)
        //immediate:true,//第一次赋值时是否执行监听操作
        handler(newValue,oldValue){
          if(newValue.length===0){
            this.haveBoolean.love=false;//点赞提醒没了
          }
        }
      }
    },
    created() {
      this.fetchData()
    },
  }
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .github-corner {
      position: absolute;
      top: 0px;
      border: 0;
      right: 0;
    }

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>
